<template>
  <div class="box box-primary box-hover">
    <div class="box-header with-padding with-border">
      <strong class="sea_page_title">OpenAPI</strong>
      <a @click="copy">复制</a>或者<a @click="download">另存</a>下列代码，导入Postman即可开始接口调试
      <sea-clipboard ref="clipboard"></sea-clipboard>
      <el-button type="text" @click="reload" class="pull-right"><i class="fa fa-refresh"></i> 刷新</el-button>
      <div class="clearfix"></div>
    </div>
    <div class="box-body with-padding">
      <sea-skeleton :data="code" :loading="loading" :row="7">
        <sea-code :text="code" type="json" :style="style"></sea-code>
      </sea-skeleton>
    </div>
  </div>
</template>

<script>

/**
 * postman 接口文档
 */
export default {
    name: "index",
    data() {
        return {
            // 是否载入中
            loading: false,
            // 当前显示的代码
            code: '',
            // 代码框的样式，主要是为了去除滚动条
            style: ''
        }
    },
    created() {
        this.reload();
    },
    methods: {
        /**
         * 复制到剪切板
         */
        copy: function () {
            if(this.$layers.isEmpty(this.code)){
                this.$layers.warn("无相关数据，可能是因为后台未启用此功能！");
                return;
            }
            try {
                this.$refs.clipboard.copy(this.code);
                this.$layers.succeed("已经成功复制到剪切板！");
            } catch (e) {
                this.$layers.warn("当前浏览器不支持此操作，请手动进行复制！");
            }
        },
        /**
         * 下载当前界面的代码
         */
        download: function () {
            if(this.$layers.isEmpty(this.code)){
                this.$layers.warn("无相关数据，可能是因为后台未启用此功能！");
                return;
            }
            try {
                this.$refs.clipboard.export('接口文档.json', this.code);
                this.$layers.succeed("已经成功下载文件！");
            } catch (e) {
                this.$layers.warn("当前浏览器不支持此操作，请手动进行复制！");
            }
        },
        /**
         * 重新载入代码
         */
        reload: function () {
            this.loading = true;
            // 设置高度
            this.style = 'overflow: auto;height:' + (document.body.clientHeight - 216) + 'px';
            this.$layers.ajax({
                url: '/api/doc',
                method: 'GET',
                params: {}
            }).then((result) => {
                this.loading = false;
                if (result.code === 0) {
                    // 代码
                    this.code = JSON.stringify(result.data, null, 2);
                }
            }).catch(err=>{
                this.loading = false;
            });
        }
    }
}
</script>

<style scoped>

</style>
